<template>
  <div>
    <h2>组合API-组件生命周期</h2>
    <hr>
    <div>{{n}}</div>
    <button @click='handleClick'>点击</button>
  </div>
</template>
<script>
import { onBeforeMount, onMounted, onUpdated, ref } from 'vue'

export default {
  name: 'App',
  setup () {
    // 挂载前触发
    onBeforeMount(() => {
      console.log('nihao')
    })
    // 组件挂载后触发
    onMounted(() => {
      console.log('hello')
    })
    // 同名的生命周期可以触发多次
    onMounted(() => {
      console.log('hi')
    })
    onUpdated(() => {
      console.log('-----------------')
    })
    const n = ref(0)
    const handleClick = () => {
      console.log('hello')
      n.value = 111
      n.value = 222
      n.value = 333
    }
    return { handleClick, n }
  }
}
</script>
